<template>
  <!-- ReviewDetails 审核详情  -->
  <PageContainer>
    <view class="container pb-30">
      <Header title="申请详情" :is-box-shadow="false" />
      <view class="bgf pa-15 fz-14">
        <view>
          {{ infoData?.applyUserName }}提交的{{ getText('orderType', infoData?.orderType) }}申请
        </view>
        <view class="pt-15 color1">{{ getText('phaseState', infoData?.phaseState) }}</view>
        <!-- <view class="pt-15 color2" v-if="orderDetails.status === 2">已通过</view>
      <view class="pt-15 color3" v-if="orderDetails.status === 3">未通过</view> -->
      </view>
      <view class="bgf mt-15 pb-15">
        <view class="linh-40 pl-15 fz-16 fw-7 borderBottom">流程</view>
        <view
          class="stepBox disFlx py-10 px-15"
          v-for="(item, index) in infoData?.stepList"
          :key="index"
        >
          <view class="pt-5 pr-10">
            <TImage :src="item.headImg" width="60rpx" height="60rpx" border-radius="50%" />
          </view>
          <view>
            <view class="fz-12" style="color: #aaabab" v-if="item.title">{{ item.title }}</view>
            <view class="fz-14 pt-5">
              <text class="pr-5">{{ item.userName }}</text>
              <text class="color1" v-if="item.status === OrderAuditStateEnum.UNREVIEWED">
                (待审核)
              </text>
              <text class="color2" v-if="item.status === OrderAuditStateEnum.PASSED">(已通过)</text>
              <text class="color3" v-if="item.status === OrderAuditStateEnum.REJECT">(未通过)</text>
              <!-- <text v-if="item.status === 4">(已建群)</text> -->
            </view>
            <view
              class="fz-12 pt-6 disFlx"
              v-if="item.status === OrderAuditStateEnum.UNREVIEWED && item.isAudit"
            >
              <view class="btn color3" @click="noPassShowModal">不通过</view>
              <view class="btn color2" @click="showPassModal">通过</view>
            </view>
            <view
              class="fz-12 pt-6"
              style="color: #808080"
              v-if="item.status === OrderAuditStateEnum.PASSED"
            >
              {{ item.remarks }}
            </view>
            <view class="fz-12 pt-6 color3" v-if="item.status === OrderAuditStateEnum.REJECT">
              {{ item.remarks }}
            </view>
            <view class="fz-12 pt-6 disFlx" v-if="item.status === PhaseStateEnum.FINISH">
              <view
                v-if="
                  (assType === AssTypeEnum.INNER &&
                    userInfo.sysUser?.userId === infoData?.orgAuditUserId) ||
                  ((assType === AssTypeEnum.OUTSIDE || assType === AssTypeEnum.ALLIANCE) &&
                    userInfo.sysUser?.userId === infoData?.toOrgAuditUserId)
                "
                class="btn color1"
                style="width: 132rpx"
                @click="handleToRoom"
              >
                点击进入
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="bgf info-box">
        <Applicant title="申请人信息" :contact-info="applyUserInfo" />
        <view class="tips">申请原因: {{ infoData?.remark }}</view>
        <img class="icon" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/admin/icon-1.png" alt="" @click="handleMakePhone" />
      </view>
      <view>
        <Applicant title="申请查看信息" :contact-info="infoData?.memberContactsVo" />
      </view>
      <ShowModal
        v-model="passModalVisible"
        title="审核通过"
        content-width="100%"
        confirm-text="确认"
        @confirm="handleConfirm"
      >
        <template #content>
          <view class="pa-20" style="color: #ea5e0e; text-align: left">
            <view class="pb-10">1、审核通过后被解锁的联系方式将会公开给申请人；</view>
            <view class="pb-10">
              2、审核通过后，如果被解锁人已经登陆过小程序，将会把双方建立群聊；
            </view>
            <view class="pb-10">请确认已获得被解锁人同意！</view>
          </view>
        </template>
      </ShowModal>
      <ShowModal
        v-model="noPassmodalVisible"
        title="驳回申请"
        content-width="100%"
        confirm-text="确认"
        @confirm="handleConfirm"
      >
        <template #content>
          <view class="pa-20" style="width: 100%">
            <view class="pb-16 fz-14" style="color: #999996">
              驳回后，费用将原路退回到申请人账户
            </view>
            <view style="background-color: #f2f3f5">
              <UniEasyinput type="textarea" placeholder="请输入驳回申请" v-model="params.remark" />
            </view>
          </view>
        </template>
      </ShowModal>
    </view>
    <ShowModal
      v-model="noPassmodalVisible"
      title="驳回申请"
      content-width="100%"
      confirm-text="确认"
      @confirm="handleConfirm"
    >
      <template #content>
        <view class="pa-20" style="width: 100%">
          <view class="pb-16 fz-14" style="color: #999996">驳回后，费用将原路退回到申请人账户</view>
          <view style="background-color: #f2f3f5">
            <UniEasyinput type="textarea" placeholder="请输入驳回申请" v-model="params.remark" />
          </view>
        </view>
      </template>
    </ShowModal>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  ReviewDetails  审核详情  */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import TImage from '@/components/TImage/index.vue';
  import Applicant from '../components/Applicant.vue';
  import ShowModal from '@/components/ShowModal/index.vue';
  import UniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
  import { ref, unref } from 'vue';
  import { navigateTo, onLoad } from '@/router';
  import { contactsDetail, contactsReview, cooperationReview } from '@/api/admin';
  import type { ContactsDetailResult, ReviewData } from '@/api/admin/types';
  import { AssTypeEnum, OrderAuditStateEnum, PhaseStateEnum } from '@/enums/orderEnum';
  import dictionary from '@/utils/dictionary';
  import { Toast } from '@/utils';
  import { useUserStoreWithOut } from '@/store/modules/user';
  import { storeToRefs } from 'pinia';

  interface stepItem {
    headImg: string;
    title: string;
    userName: string;
    status: number;
    remarks: string;
    isAudit?: boolean;
  }
  const infoData = ref<ContactsDetailResult & { stepList: stepItem[] }>();

  const applyUserInfo = ref<any>();

  const params = ref<ReviewData>({
    id: 0,
    status: 1,
    remark: '',
  });
  const assType = ref(AssTypeEnum.INNER);

  let callback: () => void;
  const useUser = useUserStoreWithOut();
  const { userInfo, tenantId } = storeToRefs(useUser);

  onLoad<'ReviewDetails'>((op) => {
    params.value.id = op.id;
    callback = op.callback;
    getDetails();
  });

  const auditStatus = ref(0);
  async function getDetails() {
    let res = await contactsDetail(params.value.id);
    console.log(res);

    auditStatus.value = res.auditStatus;
    assType.value = res.assType;
    infoData.value = {
      ...res,
      stepList: [
        {
          headImg: res.applyUserAvatar,
          title: '发起申请',
          userName: res.applyUserName,
          status: -1,
          remarks: '',
        },
      ],
    };
    infoData.value.stepList.push({
      headImg: res.orglogo,
      title: res.orgAuditUserName,
      userName: res.orgName,
      status: res.orgAuditStatus,
      remarks: res.orgAuditReason,
      isAudit: tenantId.value == res.orgTenantId,
    });

    if (res.orgTenantId !== res.toOrgTenantId) {
      infoData.value.stepList.push({
        headImg: res.toOrgLogo,
        title: res.toOrgAuditUserName,
        userName: res.toOrgName,
        status: res.toOrgAuditStatus,
        remarks: res.toOrgAuditReason,
        isAudit: tenantId.value == res.toOrgTenantId,
      });
    }

    if (res.phaseState === PhaseStateEnum.CREATE_ROOM || res.phaseState === PhaseStateEnum.FINISH) {
      infoData.value.stepList.push({
        headImg: '',
        title: '',
        userName: '建立群聊（已建群）',
        status: PhaseStateEnum.FINISH,
        remarks: '',
      });
    }

    applyUserInfo.value = {
      leadingAvatar: infoData.value?.applyUserAvatar,
      leadingName: infoData.value?.applyUserName,
      orgTenantName: infoData.value?.orgName,
      companyName: infoData.value?.applyCompanyName,
      leadingSocialPosition: infoData.value?.applyCompanyPositionName,
      applyType: infoData.value?.applyType,
    };
  }

  function getText(type: string, value: any) {
    const dicts = dictionary.getLocal(type);
    const item = dicts.find((f) => f.dictValue === value);
    return item?.dictLabel;
  }

  /** 通过弹窗 */
  const passModalVisible = ref(false);
  function showPassModal() {
    passModalVisible.value = true;
    params.value.status = 1;
  }

  /** 驳回弹窗 */
  const noPassmodalVisible = ref(false);
  function noPassShowModal() {
    noPassmodalVisible.value = true;
    params.value.status = 2;
  }

  async function handleConfirm() {
    if (assType.value !== AssTypeEnum.INNER && !auditStatus.value) {
      await contactsReview(unref(params));
    } else if (assType.value === AssTypeEnum.INNER) {
      await contactsReview(unref(params));
    } else {
      await cooperationReview(unref(params));
    }

    Toast('审核成功');
    getDetails();
    callback?.();
  }

  function handleToRoom() {
    navigateTo({
      name: 'TUIChat',
      options: { conversationID: `GROUP${infoData.value?.orderCode}` },
    });
  }

  function handleMakePhone() {
    uni.makePhoneCall({
      phoneNumber: infoData.value?.applyUserPhone as string,
      fail: (err) => console.log(err),
    });
  }
</script>

<style lang="scss" scoped>
  $color-primary: #2878ff;
  $color-error: #ff3434;
  $color-warning: #ffa944;

  .color1 {
    color: $color-primary;
  }

  .color2 {
    color: $color-warning;
  }

  .color3 {
    color: $color-error;
  }

  .stepBox {
    height: 128rpx;
    position: relative;
  }
  .stepBox + .stepBox {
    &::before {
      content: ' ';
      display: block;
      width: 1px;
      height: 50%;
      background-color: #808080;
      position: absolute;
      left: 60rpx;
      top: -20rpx;
      transform: translateY(-50%);
    }
  }
  .btn {
    width: 106rpx;
    text-align: center;
    line-height: 50rpx;
    background-color: #f5f5f5;
    border-radius: 10rpx;
  }
  .btn + .btn {
    margin-left: 30rpx;
  }
  .tips {
    line-height: 80rpx;
    border-top: solid 1px #dddddd;
    margin: 0 30rpx;
    font-size: 24rpx;
    color: #aaabab;
    text-align: center;
  }
  .info-box {
    position: relative;
    .icon {
      width: 50rpx;
      height: 50rpx;
      position: absolute;
      top: 120rpx;
      right: 40rpx;
    }
  }
</style>
